<template>
  <div class="mobile-table-wrapper">
    <van-list
      :finished="finished"
      :loading="loading"
      @load="onLoad"
    >
      <table class="mobile-table">
        <thead class="table-heaer">
          <tr>
            <th
              v-for="col in columns"
              :key="col.key || col.prop"
              :style="{ width: (col.width || '100px') }"
              class="sticky-th"
            >
              {{ col.title }}
            </th>
          </tr>
        </thead>
        <tbody class="tbody">
          <tr
            v-for="(row, rowIdx) in data"
            :key="rowIdx"
            @click="showDrawer(row)"
            style="cursor: pointer;"
          >
            <td
              v-for="col in columns"
              :key="col.key || col.prop"
              :style="{ width: (col.width || '100px') }"
              class="ellipsis"
            >
              {{ row[col.prop] }}
            </td>
          </tr>
        </tbody>
      </table>
    </van-list>

    <!-- vant 抽屉 -->
    <van-popup
      v-model:show="drawerShow"
      position="bottom"
      round
      :style="{ height: '40%' }"
    >
      <div class="drawer-content">
        <div class="drawer-header">
          <span class="title">{{ drawerData.name }}</span>
          <span class="status">状态：{{ drawerData.status }}</span>
        </div>
        <div class="divider"></div>
        <div class="drawer-row">
          <div>温度：{{ drawerData.temp || '45°' }}</div>
          <div>湿度：{{ drawerData.humidity || '51%' }}</div>
        </div>
        <div class="drawer-row">
          <div>参数：{{ drawerData.param1 || '45°' }}</div>
          <div>参数：{{ drawerData.param2 || '45°' }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  columns: Array,
  data: Array,
  loading: Boolean,
  finished: Boolean,
});
const emit = defineEmits(['load']);

function onLoad() {
  emit('load');
}

// 抽屉相关
const drawerShow = ref(false)
const drawerData = ref({})

function showDrawer(row) {
  drawerData.value = row
  drawerShow.value = true
}
</script>

<style scoped>
.table-heaer {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.mobile-table-wrapper {
  overflow-x: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px #e6e6fa;
  margin: 0 8px;
  height: 100%;
  padding-top: 0!important ;
}
.mobile-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: 15px;
  color: #222222;
  table-layout: fixed;
  width: 100%;
  position: relative;
}
.mobile-table th,
.mobile-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}
.table-header{
    position: sticky;
    top: 0;
}
.mobile-table th {
  background: #f7faff;
  font-weight: bold;
}
.mobile-table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 600px) {
  .mobile-table {
    font-size: 13px;
    min-width: 400px;
  }
  .mobile-table-wrapper {
    padding: 4px 0;
  }
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-th {
  position: sticky;
  top: 0;
  background: #f7faff;
  z-index: 2;
  border-top: none;
  border-bottom: 1px solid #f0f0f0;
}
.drawer-content {
  padding: 24px 20px;
}
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 12px;
}
.drawer-header .title{
    color: #222222;
}
.status {
  font-size: 16px;
  color: #222;
}
.divider {
  height: 1px;
  background: #eee;
  margin: 12px 0;
}
.drawer-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 16px;
  color: #222;
}
</style>
